<template>
    <div class="system-sysConfig-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="600px" :close-on-click-modal="false">
            <el-form ref="deptDialogFormRef" :model="state.ruleForm" size="default" label-width="100px" >
                            <el-form-item v-show="false" label="主键ID" prop="configId">
                                <el-input v-model="state.ruleForm.configId" placeholder="主键ID"></el-input>
                            </el-form-item>
                            <el-form-item label="配置名称" prop="configName">
                                <el-input v-model="state.ruleForm.configName" placeholder="配置名称"></el-input>
                            </el-form-item>
                            <el-form-item label="配置键" prop="configKey">
                                <el-input  v-model="state.ruleForm.configKey" placeholder="配置键"></el-input>
                            </el-form-item>
                            <el-form-item label="配置值" prop="configValue">
                                <el-input type="textarea" v-model="state.ruleForm.configValue" placeholder="配置值"></el-input>
                            </el-form-item>
                            <el-form-item label="配置类型" prop="configType">
                                <fast-select  v-model="state.ruleForm.configType" dict-type="CONFIG_TYPE" placeholder="配置类型"></fast-select>
                            </el-form-item>
                            <el-form-item label="备注" prop="remark">
                                <el-input type="textarea" v-model="state.ruleForm.remark" placeholder="备注"></el-input>
                            </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="onCancel" size="default">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemSysConfigDialog">
    import {reactive, defineAsyncComponent, ref} from 'vue';
    // 引入组件
    const  FastEditor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
    import FastSelect from "/@/components/fast-select/src/fast-select.vue";
    import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";
    import FastImg from "/@/components/fast-upload/img.vue";
    import FastImgs from "/@/components/fast-upload/imgs.vue";
    import FastFile from "/@/components/fast-upload/file.vue";
    import { sysConfigApi } from '/@/api/system/sysConfig';
    const baseApi = sysConfigApi();
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const sysConfigDialogFormRef = ref();

    const state = reactive({
        ruleForm: {
            configId: '',
            configName: '',
            configKey: '',
            configValue: '',
            configType: '',
            tenantId: '',
            revision: '',
            createBy: '',
            createTime: '',
            updateBy: '',
            updateTime: '',
            remark: ''        },
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
    });
    // 重置
    const resetFomr = () => {
        state.ruleForm = {
            configId: '',
            configName: '',
            configKey: '',
            configValue: '',
            configType: '',
            tenantId: '',
            revision: '',
            createBy: '',
            createTime: '',
            updateBy: '',
            updateTime: '',
            remark: ''        }
    }
    const openDialog = (type: string, row: RowSysConfigType) => {
        resetFomr();
        state.dialog.isShowDialog = true;
        if (type === 'edit'){
            state.ruleForm = row;
            state.dialog.title = '修改';
            state.dialog.submitTxt = '修 改';
            state.dialog.type = 'edit';
        }
        if (type === 'add') {
            state.dialog.title = '新增';
            state.dialog.submitTxt = '新 增';
            state.dialog.type = 'add';
        }
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        emit('refresh', state.ruleForm);
    };
    // 暴露变量
    defineExpose({
        openDialog, closeDialog
    });
</script>
